/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2018-12-02 03:00:23
 * 
 * 修改账号
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/AddressHeader';
import ToastUi from '../../../../components/Toast/Toast';
import { Toast, Toptips,Button, Popup, Grids, PopupHeader,Dialog } from 'react-weui';
import {Link,NavLink} from 'react-router-dom';
import { connect } from "react-redux";
import * as actions from '../../../../store/action/my';
import '../../../../static/css/common.less';
import cnCity from './cnCity';
import './addressList.less';

class AddressList extends Component {

    componentWillMount(){
        this.props.getAddressList();
    }

    //删除一行
    deleteItem = (id) =>{
        this.deleteId = id;
        this.setState({
            showIOS2: true
        });
    }

    //修改
    pathItem = (item) =>{
        item.priority = 1;
        this.props.pathAddressItem(item.id, item);
    }

    //编辑
    editAddress = (item) =>{
        let cityId = this.selectedCity(item)
        this.props.history.push(`editAddress/${item.id}/${cityId}`)
    }


    state = {
        style2: {
            title: '提示',
            buttons: [
                {
                    type: 'default',
                    label: '取消',
                    onClick: this.hideDialog.bind(this)
                },
                {
                    type: 'primary',
                    label: '确定',
                    onClick: this.confirmDialog.bind(this)
                }
            ]
        }
    };

    hideDialog() {
        this.setState({
            showIOS2: false
        });
    }

    confirmDialog() {
        this.setState({
            showIOS2: false
        });
        let id = this.deleteId;
        this.props.deleteAddressItem(id);
    }




    selectedCity(item){
        let province_code = item.province_code;
        let city_code =  item.city_code;
        let district_code =  item.district_code;

        var arr = [];
        let cityArr = [];
        cnCity.forEach((item, key)=>{
            if(item.code == province_code){
                cityArr = item.sub;
                arr.push(key);
            }
        })
        let districtArr = [];
        cityArr.forEach((item, key)=>{
            if(item.code == city_code){
                districtArr = item.sub;
                arr.push(key);
            }
        })
        districtArr.forEach((item,key)=>{
            if(item.code == district_code){
                arr.push(key);
            }
        })

        return arr.join(':');
    }

    render() {
        return (
            <div>
                <div className="detail-region">
                    <Header title="收货地址"></Header>
                    <section className="content">
                    <Dialog type="ios" title={this.state.style2.title} buttons={this.state.style2.buttons} show={this.state.showIOS2}>
                        确定删除地址？
                    </Dialog>
                    {this.props.my.addressList.map((item)=>{
                      return  <div className="address-item">
                           <div className="item-name">{item.receiver}<span>{item.phone}</span></div>
                           <div className="item-add">{item.province.name} {item.city.name} {item.district.name} {item.address}</div>
                           <div className="item-phone"></div>
                           <div className="edit-line"></div>
                           <div className="edit-btn" onClick={this.editAddress.bind(undefined, item)}>编辑</div>
                           <div className="line-1"></div>
                           <label class="radio-label" onClick={this.pathItem.bind(undefined, item)}><input type="radio" name="default" checked={ item.priority==1}/>默认</label>
                           <div class="delete-btn" onClick={this.deleteItem.bind(undefined, item.id)}><i></i>删除</div>
                      </div>
                    })}
                    </section>
                </div>
            </div>
        )
    }
}


//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(AddressList);